import {
  memo,
  useCallback,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react'
import { Drawer, Form, Input, Select, Button } from 'antd'
import { IFormRef } from '../../../types'
import { useForm } from 'antd/es/form/Form'
import {
  useAddDsrBeef,
  useUpdateDsrBeef,
} from '../../../service/beef/beef-service'

type IBeefFormParams = {
  openDsr: boolean
  dsrData: any
  visibleDsr: number
  handDsrId: (value: string) => void
  onRef: React.MutableRefObject<IFormRef | undefined>
  openFn: (open: boolean) => void
  setVisibleDsr: (value: number) => void
  getDangList: any
  beefId: string | undefined
}

const DsrFrom = ({ handDsrId, ...props }: IBeefFormParams) => {
  //表单所有的内容
  const [form] = useForm()
  //添加当事人接口
  const { mutateAsync: addMutation, isLoading: addIsLoading } = useAddDsrBeef()
  const { mutateAsync: updateMutation, isLoading: updateIsLoading } =
    useUpdateDsrBeef()
  useEffect(() => {
    if (props.visibleDsr == 1 || props.visibleDsr == 2) {
      console.log('dsr数据', props.dsrData)
      form.setFieldsValue({
        litigantName: props.dsrData.litigantName,
        category: props.dsrData.category,
        gender: props.dsrData.gender,
        nation: props.dsrData.nation,
        phone: props.dsrData.phone,
        cardType: props.dsrData.cardType,
        cardNumber: props.dsrData.cardNumber,
        academicDegree: props.dsrData.academicDegree,
        belongingArea: props.dsrData.belongingArea,
        roadName: props.dsrData.roadName,
        communityName: props.dsrData.communityName,
        buildingRoom: props.dsrData.buildingRoom,
        enterpriseName: props.dsrData.enterpriseName,
        enterpriseCreditCode: props.dsrData.enterpriseCreditCode,
        keyConcerns: props.dsrData.keyConcerns,
        threatsMade: props.dsrData.threatsMade,
      })
    } else {
      setTimeout(() => {
        form.resetFields()
      }, 500)
    }
  }, [props.visibleDsr])
  const saveDsrHandler = async () => {
    const isPass = await form.validateFields()
    if (!isPass) {
      return
    }
    const values = await form.validateFields()
    const res = await addMutation({ ...values })
    form.resetFields()
    props.openFn(false)
    handDsrId(res)
  }
  const updateDsrHandler = async () => {
    const isPass = await form.validateFields()
    if (!isPass) {
      return
    }
    const values = await form.validateFields()
    values.id = props.dsrData.id
    const res = await updateMutation({ ...values })
    form.resetFields()
    props.openFn(false)
    props.setVisibleDsr(0)
    props.getDangList(props.beefId)
  }
  return (
    <Drawer
      title={
        props.visibleDsr == 0
          ? '添加当事人信息'
          : props.visibleDsr == 1
          ? '查看当事人信息'
          : '修改当事人信息'
      }
      width={'40rem'}
      closable={false}
      onClose={() => {
        props.openFn(false)
        props.setVisibleDsr(0)
      }}
      open={props.openDsr}
      footer={
        <>
          {props.visibleDsr == 0 ? (
            <Button
              onClick={() => {
                saveDsrHandler()
              }}
            >
              保存
            </Button>
          ) : props.visibleDsr == 1 ? (
            <Button onClick={()=>{props.openFn(false)}}>关闭</Button>
          ) : (
            <Button
              onClick={() => {
                updateDsrHandler()
              }}
            >
              修改
            </Button>
          )}
        </>
      }
    >
      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
        <Form.Item
          label={'当事人'}
          name={'litigantName'}
          rules={[{ required: true, message: '当事人姓名不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={'类别'} name={'category'}>
          <Select
            options={[
              { value: '企业', label: '企业' },
              { value: '学校', label: '学校' },
              { value: '居民', label: '居民' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label={'性别'}
          name={'gender'}
          rules={[{ required: true, message: '当事人性别不能为空' }]}
        >
          <Select
            options={[
              { value: '男', label: '男' },
              { value: '女', label: '女' },
            ]}
          />
        </Form.Item>
        <Form.Item label={'名族'} name={'nation'}>
          <Select
            options={[
              { value: '汉族', label: '汉族' },
              { value: '回族', label: '回族' },
              { value: '藏族', label: '藏族' },
              { value: '维吾尔族', label: '维吾尔族' },
              { value: '彝族', label: '彝族' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label={'手机号码'}
          name={'phone'}
          rules={[{ required: true, message: '手机号码不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={'证件类型'} name={'cardType'}>
          <Select
            options={[
              { value: '居民身份证一代', label: '居民身份证一代' },
              { value: '居民身份证二代', label: '居民身份证二代' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label={'证件号码'}
          name={'cardNumber'}
          rules={[{ required: true, message: '证件号码不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={'学历'} name={'academicDegree'}>
          <Select
            options={[
              { value: '专科', label: '专科' },
              { value: '本科', label: '本科' },
              { value: '研究生', label: '研究生' },
              { value: '博士', label: '博士' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label={'所属街道'}
          name={'belongingArea'}
          rules={[{ required: true, message: '所属街道不能为空' }]}
        >
          <Select options={[{ value: '滕王阁社区', label: '滕王阁社区' }]} />
        </Form.Item>
        <Form.Item label={'所在路名'} name={'roadName'}>
          <Input />
        </Form.Item>
        <Form.Item
          label={'所属社区'}
          name={'communityName'}
          rules={[{ required: true, message: '所属街区不能为空' }]}
        >
          <Select
            options={[
              { value: '滕王阁社区', label: '滕王阁社区' },
              { value: '叠山路西社区', label: '叠山路西社区' },
              { value: '大士院北区社区', label: '大士院北区社区' },
              { value: '射步亭社区', label: '射步亭社区' },
              { value: '民巷社区', label: '民巷社区' },
              { value: '大士院西区社区', label: '大士院西区社区' },
              { value: '大士院南区社区', label: '大士院南区社区' },
              { value: '子固路社区', label: '子固路社区' },
              { value: '章江路社区', label: '章江路社区' },
            ]}
          />
        </Form.Item>
        <Form.Item label={'楼栋房间'} name={'buildingRoom'}>
          <Input />
        </Form.Item>
        <Form.Item label={'企业名称'} name={'enterpriseName'}>
          <Input />
        </Form.Item>
        <Form.Item label={'企业社区信用代码'} name={'enterpriseCreditCode'}>
          <Input />
        </Form.Item>
        <Form.Item
          label={'是否有重点关注的情形'}
          name={'keyConcerns'}
          rules={[{ required: true, message: '类型不能为空' }]}
        >
          <Select
            options={[
              { value: '是', label: '是' },
              { value: '否', label: '否' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label={'是否扬言'}
          name={'threatsMade'}
          rules={[{ required: true, message: '是否扬言不能为空' }]}
        >
          <Select
            options={[
              { value: '是', label: '是' },
              { value: '否', label: '否' },
            ]}
          />
        </Form.Item>
      </Form>
    </Drawer>
  )
}
export default memo(DsrFrom)
